<script setup>
import { ref, onMounted, watch } from 'vue'
import StatsInfo from './StatsInfo.vue'
import DialogTips from './DialogTips.vue'
import {
  DArrowRight,
  Monitor,
  FullScreen,
  Mouse,
  Unlock,
  Lock,
  Setting,
  Mic,
  DataAnalysis,
  DataBoard,
  CircleClose,
  SwitchButton
} from '@element-plus/icons-vue'
import { useFullscreen } from '@vueuse/core'
import hotkeys from 'hotkeys-js'
import { storeToRefs } from 'pinia'
import useMenuStore from '@/pinia/menuStore'
const emits = defineEmits(['changeAction', 'unlockMouse', 'lockMouse', 'setMic'])
const menuStore = useMenuStore()
const { isMouseLock, screenType, isStream, micPercent, mousePercent } = storeToRefs(menuStore)
const { isFullscreen, toggle } = useFullscreen()
const isExpand = ref(false)
const isShowData = ref(true)
const isShowTips = ref(true)
const dialogVisible = ref(false)
// eslint-disable-next-line no-unused-vars
const props = defineProps({
  statsDetail: {
    type: Object,
    default: () => {
      return {}
    }
  }
})
/**
 * 监听是否全屏设置键盘锁定
 */
watch(isFullscreen, (n) => {
  if (n) {
    navigator.keyboard.lock()
  } else {
    navigator.keyboard.unlock()
  }
})
watch(isExpand, (n) => {
  if (n && isMouseLock.value) {
    emits('unlockMouse')
  }
  if (!n && isMouseLock.value) {
    emits('lockMouse')
  }
})

onMounted(() => {
  hotkeys('shift+tab', (event) => {
    event.preventDefault()
    isExpand.value = !isExpand.value
  })
})

// 切换菜单显示隐藏
const toggleMenu = () => {
  isExpand.value = !isExpand.value
}

// 开启关闭全屏
const setScreen = () => {
  toggle()
}

// 退出游戏
const quitGame = () => {
  dialogVisible.value = true
}

// 设置分辨率
const setScreenType = (screenType) => {
  menuStore.setState({
    screenType
  })
  emits('changeAction', {
    type: 'size'
  })
}

// 鼠标锁定解锁
const setMouseLock = (isMouseLock) => {
  emits('unlockMouse')
  menuStore.setState({
    isMouseLock
  })
}
</script>
<template>
  <DialogTips title="确定退出当前程序吗?" v-if="dialogVisible" v-model="dialogVisible"></DialogTips>
  <div v-if="isStream">
    <!--统计信息-->
    <StatsInfo :isShowData="isShowData" :statsDetail="statsDetail"></StatsInfo>
    <!--圆球菜单-->
    <div
      class="group cricle-menu flex justify-end hover:justify-center items-center shadow-lg pr-[10px] hover:pr-0 hover:translate-x-[1px] hover:text-[#fff] translate-x-[-50%] translate-y-[-50%] bg-[#18212e] duration-700 hover:scale-105"
      @click="toggleMenu"
      v-show="!isExpand"
    >
      <div class="hidden group-hover:block text-[12px] text-[#00ffc2] font-bold">展开菜单</div>
      <el-icon class="group-hover:hidden" size="22" color="#00ffc2"><DArrowRight /></el-icon>
    </div>
    <!--全屏提示语-->
    <div
      class="flex items-center h-[40px] rounded-md fixed z-[999] w-[540px] px-[20px] left-[50%] translate-x-[-50%] top-[20px] bg-[#191f27] text-[#999] tracking-[1px]"
      v-show="!isFullscreen && isShowTips"
    >
      温馨提示：窗口模式下用户体验会受到影响，请点击
      <div
        class="bg-[#00ffc2] w-[80px] h-[24px] leading-[24px] text-center text-[#666] cursor-pointer rounded-xl mx-[5px]"
        @click="setScreen"
      >
        开启全屏
      </div>
      模式
      <el-icon class="ml-[15px] cursor-pointer" size="18" @click="isShowTips = false"
        ><CircleClose
      /></el-icon>
    </div>
    <!--菜单项列表-->
    <div :class="`action-menu flex text-[#f5f5f5]}`" v-show="isExpand" @click="toggleMenu">
      <div class="menu-list fixed z-[999] top-[50%] translate-y-[-50%]" @click.stop>
        <ul class="text-[#ccc]">
          <li class="group relative">
            <div class="li-box">
              <div>
                <el-icon size="22"><Monitor /></el-icon>
              </div>
              <div>画面设置</div>
            </div>
            <div class="li-item w-[160px]">
              <div
                @click="setScreenType('auto')"
                class="item-box"
                :class="{ 'bg-[#444] text-[#00ffc2]': screenType === 'auto' }"
              >
                <div>
                  <el-icon size="22"><Monitor /></el-icon>
                </div>
                <div>原有比例</div>
              </div>
              <div
                @click="setScreenType('full')"
                class="item-box"
                :class="{ 'bg-[#444] text-[#00ffc2]': screenType === 'full' }"
              >
                <div>
                  <el-icon size="22"><FullScreen /></el-icon>
                </div>
                <div>拉伸铺满</div>
              </div>
            </div>
          </li>
          <li class="group relative">
            <div class="li-box">
              <div>
                <el-icon size="22"><Mouse /></el-icon>
              </div>
              <div>鼠标状态</div>
            </div>
            <div class="li-item w-[160px]">
              <div
                @click="setMouseLock(false)"
                class="item-box"
                :class="{ 'bg-[#444] text-[#00ffc2]': !isMouseLock }"
              >
                <div>
                  <el-icon size="22"><Unlock /></el-icon>
                </div>
                <div>默认解锁</div>
              </div>
              <div
                @click="setMouseLock(true)"
                class="item-box"
                :class="{ 'bg-[#444] text-[#00ffc2]': isMouseLock }"
              >
                <div>
                  <el-icon size="22"><Lock /></el-icon>
                </div>
                <div>默认锁定</div>
              </div>
            </div>
          </li>
          <li class="group relative">
            <div class="li-box">
              <div>
                <el-icon size="22"><Setting /></el-icon>
              </div>
              <div>通用设置</div>
            </div>
            <div class="li-item w-[160px]">
              <div class="item-box relative border-r-[1px] border-[#111] hidden">
                <div
                  class="absolute z-[10] left-0 w-[80px] h-[160px] flex justify-center bg-[#18212e] top-[-160px] border-r-[1px] border-[#111]"
                >
                  <div class="py-[10px]">
                    <el-slider vertical v-model="mousePercent" class="custom-slider"></el-slider>
                  </div>
                </div>
                <div>
                  <el-icon size="22"><Mouse /></el-icon>
                </div>
                <div>鼠标灵敏度</div>
              </div>
              <div class="item-box relative">
                <div
                  class="absolute z-[10] left-0 w-[80px] h-[160px] flex justify-center bg-[#18212e] top-[-160px]"
                >
                  <div class="py-[10px]">
                    <el-slider vertical v-model="micPercent" class="custom-slider"></el-slider>
                  </div>
                </div>
                <div>
                  <el-icon size="22"><Mic /></el-icon>
                </div>
                <div>音量</div>
              </div>
              <div
                @click="isShowData = !isShowData"
                class="item-box relative border-l-[1px] border-[#111]"
                :class="{ 'bg-[#444] text-[#00ffc2]': !isShowData }"
              >
                <div>
                  <el-icon size="22"
                    ><DataAnalysis v-if="isShowData" /><DataBoard v-else
                  /></el-icon>
                </div>
                <div>
                  {{ isShowData ? '开启统计' : '关闭统计' }}
                </div>
              </div>
            </div>
          </li>
          <li class="group relative">
            <div
              class="li-box cursor-pointer"
              :class="{ 'text-[#00ffc2]': isFullscreen }"
              @click="setScreen"
            >
              <div>
                <el-icon size="22"><FullScreen /></el-icon>
              </div>
              <div>
                {{ isFullscreen ? '取消全屏' : '开启全屏' }}
              </div>
            </div>
          </li>
          <li class="group relative">
            <div class="li-box cursor-pointer" @click="quitGame">
              <div>
                <el-icon size="22"><SwitchButton /></el-icon>
              </div>
              <div>退出游戏</div>
            </div>
          </li>
          <li>
            <div class="li-box h-[50px] border-[0]">
              <div class="scale-90">shift+tab</div>
              <div class="scale-[0.9]">切换菜单</div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<style lang="scss">
.action-menu {
  width: 100vw;
  height: 100vh;
  position: fixed;
  z-index: 99;
  background: rgb(25, 41, 49, 0);
}
.cricle-menu {
  width: 70px;
  height: 70px;
  border-radius: 100%;
  position: fixed;
  top: 20%;
  z-index: 98;
  cursor: pointer;
}
/* 滑块颜色 */
.custom-slider .el-slider__button {
  background-color: #00ffc2; /* 默认的蓝色 */
  border-color: #00ffc2;
}

/* 轨道颜色 */
.custom-slider .el-slider__bar {
  background-color: #00ffc2; /* 默认的蓝色 */
}

/* 轨道悬停颜色 */
.custom-slider .el-slider__bar:hover {
  background-color: #00ffc2; /* 默认的蓝色 */
}
</style>
